/* establish a layer order up-front, from lowest to highest priority */
@layer reset, frameworks, user;

/* import bootstrap into layer lower than user styles */
@import url("bootstrap/dist/css/bootstrap.css") layer(frameworks);

:root {
  --bg-color: #edf2f7;

  --rstudio-blue-h: 209;
  --rstudio-blue-s: 59%;
  --rstudio-blue-l: 66%;
  --rstudio-blue-hsl: var(--rstudio-blue-h) var(--rstudio-blue-s)
    var(--rstudio-blue-l);
  --rstudio-blue: hsl(var(--rstudio-blue-hsl));
  --rstudio-blue-transparent: hsl(var(--rstudio-blue-hsl) / 0.5);

  --rstudio-grey-h: 0;
  --rstudio-grey-s: 0%;
  --rstudio-grey-l: 25%;
  --rstudio-grey-hsl: var(--rstudio-grey-h) var(--rstudio-grey-s)
    var(--rstudio-grey-l);
  --rstudio-grey: hsl(var(--rstudio-grey-hsl));
  --rstudio-grey-transparent: hsl(var(--rstudio-grey-hsl) / 0.5);

  --rstudio-white-h: 0;
  --rstudio-white-s: 0%;
  --rstudio-white-l: 100%;
  --rstudio-white-hsl: var(--rstudio-white-h) var(--rstudio-white-s)
    var(--rstudio-white-l);
  --rstudio-white: hsl(var(--rstudio-white-hsl));
  --rstudio-white-transparent: hsl(var(--rstudio-white-hsl) / 0.9);

  --grey: hsl(211 19% 70%);
  --light-grey: #e9edf3;
  --dark-grey: hsl(211 19% 50%);
  --black: hsl(214 9% 15%);
  --divider-color: #a5b3c2;
  --icon-color: #76838f;

  --background-grey: var(--light-grey);
  --header-grey: var(--grey);

  --red-rgb: 250, 83, 22;
  --red: rgb(var(--red-rgb));

  --font-color: var(--black);
  --font-color-disabled: hsl(214 9% 15% / 0.5);
  --font-size: 13px;

  --selected-outline-base: 3px solid;
  --selected-outline-color: var(--rstudio-blue);
  --selected-outline: var(--selected-outline-base) var(--selected-outline-color);

  --outline-color: var(--grey);

  --disabled-color: hsl(var(--rstudio-grey-hsl) / 0.5);
  --disabled-outline: 1px solid hsl(var(--rstudio-grey-hsl) / 0.15);

  --corner-radius: 8px;
  --vertical-spacing: 10px;
  --horizontal-spacing: 15px;
  --animation-speed: 0.2s;
  --animation-curve: ease-in-out;
  --outline: 1px solid var(--outline-color);

  --input-height: 23px;
  --input-vertical-padding: 1px;
  --input-horizontal-padding: 5px;

  --fonts: "Lucida Sans", "DejaVu Sans", "Lucida Grande", "Segoe UI",
    -apple-system, BlinkMacSystemFont, Verdana, Helvetica, sans-serif;

  --mono-fonts: Consolas, "Lucida Console", Monaco, monospace;

  --shadow-color: 0deg 0% 13%;
  --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);

  --simple-drop-shadow-filter: drop-shadow(1px 1px 4px hsl(0deg 0% 0% / 0.25));

  --size-xs: 4px;
  --size-sm: 8px;
  --size-md: 12px;
  --size-lg: 20px;
  --size-xl: 28px;

  --height-sm: 25px;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  overflow: hidden;
}

body,
input {
  font-family: var(--fonts);
  line-height: 1.5;
  color: var(--font-color);
  margin: 0;
  font-size: var(--font-size);
}

input {
  height: var(--input-height);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--rstudio-grey);
}

/* 
 By adding a disable-text-selection class to the page we can turn of selection
 so dragging wont cause all sorts of ugly text selection. */
.disable-text-selection * {
  user-select: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

/* Undo some of the default bootstrap styles */
h1,
h2,
h3 {
  font-weight: unset;
  line-height: unset;
}

code {
  color: unset;
  font-family: unset;
  font-size: unset;
}

/* Make dialog elements blur background */
dialog::backdrop {
  backdrop-filter: blur(2px);
}

[data-is-selected-node="true"] {
  position: relative;
}

[data-is-selected-node="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  outline: var(--selected-outline);
  pointer-events: none;
  border-radius: inherit;
}
